<extend name="Layout:layout_content" />
<block name="head_after">
    <style type="text/css">
        h1 { font-size:30px; margin:10px 0 20px 0; color:#F60; font-weight:bold;}
        .graph { float:left; width:600px; height:300px;}
    </style>
</block>
<block name="body_before">
    <script src="__SCRIPT__JSCharts3/sources/jscharts.js" type="text/javascript"></script>
</block>
<block name="body_main">
    <div class="grid-parent xsui-page-header">
        <div class="grid-60 mobile-grid-100 grid-parent">        
            <a href="#" class="xsui-btn ui-state-default xsui-lnk-refresh"><i class="fa fa-refresh"></i>刷新</a>
        </div>
        <div class="grid-40 mobile-grid-100 grid-parent xsui-text-right">&nbsp;</div>
    </div>
    <div id="grid-container">
        <h1>{$store_data.title}-统计分析报表</h1>
        <div class="graph">
            <div id="lxs">Loading graph...</div>        
        </div>
        <div class="graph">
            <div id="jjt">Loading graph...</div>        
        </div>
        <div class="graph">
            <div id="jjy">Loading graph...</div>        
        </div>
        <div class="graph">
            <div id="dyy">Loading graph...</div> 
        </div>
        <div style="clear: both;"></div>
    </div>
    <div id="titles" style="display:none">{$store_data['sale_title1']},{$store_data['sale_title2']},{$store_data['sale_title3']},总金额</div>
</block>
<block name="body_after">
    <script type="text/javascript">
        var aTitles = $('#titles').text().split(',');
        make_chart('旅行社人均消费(元/人)', 'lxs', [['A', 40], ['B', 30], ['C', 20], ['D', 10]], ['#99CDFB', '#3366FB', '#F89900', '#F76600'], aTitles);
        make_chart('讲解厅人均消费(元/人)', 'jjt', [['A', 40], ['B', 30], ['C', 20], ['D', 10]], ['#99CDFB', '#3366FB', '#F89900', '#F76600'], aTitles);
        make_chart('讲解员人均消费(元/人)', 'jjy', [['A', 40], ['B', 30], ['C', 20], ['D', 10]], ['#99CDFB', '#3366FB', '#F89900', '#F76600'], aTitles);
        make_chart('导游员人均消费(元/人)', 'dyy', [['A', 40], ['B', 30], ['C', 20], ['D', 10]], ['#99CDFB', '#3366FB', '#F89900', '#F76600'], aTitles);
        // 2016-6-2
        function make_chart(title, domId, aData, aColor, aTitles) {
            if (!title) {
                title = 'XXX人均消费（元/人）';
            }
            if (!domId) {
                domId = 'graph';
            }
            if (!aData) {
                aData = [['A', 40], ['B', 30], ['C', 20], ['D', 10]];
            }
            if (!aColor) {
                aColor = ['#99CDFB', '#3366FB', '#F89900', '#F76600'];
            }
            var myChart = new JSChart(domId, 'pie');
            myChart.setDataArray(aData);
            myChart.colorize(aColor);
            myChart.setSize(600, 300);
            myChart.setTitle(title);
            myChart.setTitleFontFamily('Times New Roman');
            myChart.setTitleFontSize(14);
            myChart.setTitleColor('#0F0F0F');
            myChart.setPieRadius(95);
            myChart.setPieValuesColor('#FFFFFF');
            myChart.setPieValuesFontSize(9);
            myChart.setPiePosition(180, 165);
            myChart.setShowXValues(false);
            for (var i in aTitles) {
                myChart.setLegend(aColor[i], aTitles[i]);
            }
            /*
             myChart.setLegend('#99CDFB', '丝绸');
             myChart.setLegend('#3366FB', '丝巾');
             myChart.setLegend('#F89900', '百货');
             myChart.setLegend('#F76600', '总金额');
             */
            myChart.setLegendShow(true);
            myChart.setLegendFontFamily('Times New Roman');
            myChart.setLegendFontSize(10);
            myChart.setLegendPosition(350, 120);
            myChart.setPieAngle(30);
            myChart.set3D(true);
            myChart.draw();

        }
    </script>
</block>